<template class="">
  <el-container class="al-width-100 page-login" direction="vertical">


    <el-row class="" style="margin: 10% 0 10% 0">
      <el-col :span="14" class="">
        <pre> </pre>
      </el-col>
      <el-col :span="8" class="">
        <div style="width:360px" class="al-z-index-99 al-p-20px al-box-radius al-box-container gradient-bg">
          <div class="">
            <img src="../../assets/pandalogo.png">

          </div>

          <div>
            <div class="al-title-h2  ">熊猫约拍 - 登录</div>
          </div>
          <br>

          <div class="">
            <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    class="">
              <div class="al-flex-container-center-h">
                <div class="al-flex-wrap">
                  <el-form-item label="帐号" class=" ">
                    <div class="">
                      <el-input class="al-width-80"
                                v-model="ruleForm.username"
                                placeholder="请输入账号">

                      </el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>

              <div class="al-flex-container-center-h">
                <el-form-item label="密码" prop="pass" class=" ">
                  <el-input class="al-width-80"
                            type="password"
                            v-model="ruleForm.password"
                            autocomplete="off"
                            placeholder="请输入密码">
                  </el-input>
                </el-form-item>
              </div>

              <div class="al-box-container">
                <div class="">
                  <el-button
                             round
                             plain
                             class="al-bgcolor-transparent"
                             @click="submitForm('ruleForm')">登录
                  </el-button>
                </div>
              </div>

            </el-form>

            <el-link @click="goPage('/register')" :underline="false" class="al-box-container">
              没有帐号？去注册一个吧
            </el-link>
          </div>
        </div>
      </el-col>
      <el-col :span="2" class="">
        <div></div>
      </el-col>
    </el-row>

  </el-container>
</template>


<script>


  import {request} from "../../util/network/request";
  import {USER_LOGIN} from "../../util/network/api/user/api-user";
  import eventBus from "../../util/bus/eventBus";

  export default {

    name: 'login',
    data() {

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

      return {
        bg: 'https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/isux/20171122191603_896cd9.jpg',

        ruleForm: {
          username: '',
          password: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          // checkPass: [
          //     { validator: validatePass2, trigger: 'blur' }
          // ],
        }
      };
    },
    methods: {
      logoUrl() {
        return '../../assets/panda.png'
      },

      goPage: function (path) {
        this.gotoPage(path);
      },

      //发送请求
      sendRequest: function (path, data) {
        let url = this.createUrl(path);
        let headers = {
          // 'Content-Type': 'application/json'
          'Content-Type': 'application/x-www-form-urlencoded'
        };
        let res = this.request('post', url, data, headers);
        console.log(res);
      },

      submitForm(formName) {
        let data = {
          username: this.ruleForm.username,
          password: this.ruleForm.password
        };

        console.log(data);

        this.$refs[formName].validate((valid) => {
          if (valid) {

            // this.sendRequest('/user/login', data);

            request({
              method: 'post',
              url: USER_LOGIN,
              // url: 'http://localhost:1111/login',
              data: this.qsParam(data),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then(res => {
              res = res.data;
              if (res.code == 200) {

                let userInfo = res.data.rs;
                // console.log(userInfo);
                this.$message.success('登录成功');
                localStorage.setItem("userinfo", JSON.stringify(res.data.rs));
                localStorage.setItem("isLogin", "yes");

                this.$store.commit("setLoginState", true);
                this.$store.commit("setStoreUserInfo", res.data.rs);

                // console.log('userinfo');

                if (userInfo.gender != null && userInfo.age != null && userInfo.phone != null && userInfo.city != null){
                  this.goPage('/user/profile/' + res.data.rs.id);
                }else {//新用户跳转到信息设置页面
                  this.sendDataToSetUserInfoPage(true);
                  this.goPage('/user/setUserInfo/0/' + res.data.rs.id);
                }
              } else {
                this.$message('登录失败');
              }
            }).catch(err => {
              console.log(err);
            })

          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      sendDataToSetUserInfoPage(flag){
        eventBus.$emit("getNewUser", flag);
      }
    }
  }
</script>

<style scoped>
  .page-login {
    /*background-color: #000000;*/
    background-image: url("https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/isux/VVCmQ2CrXWhP8QyGND5lps2nD6BSLXBcNXhUA3HANRt.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    background-attachment: fixed;
  }

  .local-box-bg {
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  }

  .gradient-bg {
    margin: 0;
    width: 100%;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #FFFEFF, #485563, #d1d1d1, #e7f0fd);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }


  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

</style>
